<template>
    <div>
        <el-page-header @back="goBack" content="MarkDown展示-数据维护"/>
      检索设定&nbsp;&nbsp;&nbsp;
      <el-radio v-model="searchSetting" label="keyWord" >关键字</el-radio>
      <el-radio v-model="searchSetting" label="content">文件内容</el-radio>
        <el-input v-model="searchKey" placeholder="检索问题请输入关键字,回车或点检索" style="position: relative;;width: 70%;left: 0%" @keyup.enter.native="searchProblem"></el-input>
        <el-button @click="searchProblem"  type="primary" plain style="margin: 10px;">检索</el-button>
        <el-card>
            <el-table :data="searchData" style="width: 100%;font-size: 20px; max-height: 500px; overflow-y: auto;background-color: white;">
                    <el-table-column type="index" label="序号">
                    </el-table-column>
                    <el-table-column label="列表项">
                        <template slot-scope="scope">
                        <span>{{ changePathName(scope.row.fileName )}}</span>
                        </template>
                    </el-table-column>
                  <el-table-column label="文件类型">
                    <template slot-scope="scope">
                      <span>{{scope.row.fileType}}</span>
                    </template>
                  </el-table-column>
                <el-table-column label="文档分类">
                  <template slot-scope="scope">
                    <span>{{scope.row.type}}</span>
                  </template>
                </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button type="primary" size="medium" @click="findMarkDown(scope.row)" style="font-size: 24px;">文档查看</el-button>
                          <el-button type="success" size="medium" @click="openKeyWordDialog(scope.row)" style="font-size: 24px;">关键字维护</el-button>
                        </template>
                    </el-table-column>
                </el-table>
        </el-card>
        <!-- 展示区 -->
        <el-card style="position: relative;width: 100%;overflow-x: auto;" header="MarkDown处理文档">
            <div style="position: relative;">
              <el-card style="background-color:rgb(255, 253, 245);padding: 32px;" v-if="htmlContent">
                <div v-html="htmlContent" class="v-md-header"></div>
              </el-card>
              <el-card style="background-color:rgb(255, 253, 245);padding: 32px;" v-else>
                <div style="position: absolute;left:46.5%;text-align: center;line-height: 0px;font-weight: bold;">请检索并查看文档</div>
              </el-card>
            </div>
        </el-card>
<!--      关键字维护弹出层-->
      <el-dialog
          title="关键字维护"
          :visible.sync="keyWordVisible"
          width="30%"
      >
        <div style="display: flex; align-items: center;">
          <el-input v-model="keyWordInputValue" placeholder="请输入数据"></el-input>&nbsp;
          <el-button @click="addKeyWord" type="primary">新增</el-button>
        </div>
        <div style="overflow-y: auto; max-height: 200px;">
          <el-divider>新增数据列表</el-divider>
          <div v-if="keyWordList.length!=0">
            <div v-for="(item, index) in keyWordList" :key="index" class="item-container">
              <el-tooltip class="item-tooltip" effect="dark" placement="top">
                <span slot="content">{{ item }}</span>
                <span class="item-text">{{ item }}</span>
              </el-tooltip>
              <el-button @click="deleteKeyWord(item)" type="text" size="medium">删除</el-button>
            </div>
          </div>
          <div v-else>
            暂未维护
          </div>
        </div>
      </el-dialog>
    </div>
  </template>

  <script>
  import {searchProblemV3,findMarkDownBypathV3,deleteKeyWord,addKeyWord,findMarkDownByKey} from "../ajax/api"
  import MarkdownIt from 'markdown-it';
  import MarkdownItEmoji from 'markdown-it-emoji';
  import highlightjs from 'markdown-it-highlightjs';
  import mdAbbr from 'markdown-it-abbr'
  import mdAttrs from 'markdown-it-attrs'
  import mdDeflist from 'markdown-it-deflist'
  import mdFootNote from 'markdown-it-footnote'
  import mdMark from 'markdown-it-mark'
  import mdTable from 'markdown-it-multimd-table'
  import mdSub from 'markdown-it-sub'
  import mdSup from 'markdown-it-sup'
  import "../assets/css/markdown.css"
  import Prism from 'prismjs';
  import 'highlight.js/styles/github.css'; // 或者其他你选定的代码高亮主题
  export default {
    name: "MarkDownV3",
    data() {
      return {
        searchSetting: "keyWord",
        searchKey: "",
        searchData: [], // 检索到的问题列表
        markdownText: '', // 加载好图片的Markdown文本
        markdownRenderer: null,
        htmlContent: '',
        keyWordVisible: false, // 维护关键字弹出层
        keyWordInputValue: '',
        keyWordList: [],
        chooseMarkDown: null
      }
    },
    mounted() {
    this.markdownRenderer = new MarkdownIt()
      .use(MarkdownItEmoji)
      .use(highlightjs)
      .use(mdAbbr)
      .use(mdAttrs)
      .use(mdDeflist)
      .use(mdFootNote)
      .use(mdMark)
      .use(mdTable)
      .use(mdSub)
      .use(mdSup)

    this.parseMarkdown();
    Prism.highlightAll();

  },
  computed: {
    containerClass () {
      return window.innerWidth < 768 ? 'small-container' : 'large-container';
    }
  },
    methods: {
      goBack() {
        this.$router.push({ path: "/entry" })
      },
      searchProblem() {
        searchProblemV3(this.searchKey,this.searchSetting).then(res => {
            console.log("检索数据:",res);
            if (res.data.code != 0) {
              this.$message(res.msg);
              return
            }
            this.searchData = res.data.data;
          console.log("v3值",this.searchData)
            this.markdownText = "";
            this.htmlContent = "";
        })
      },
      findMarkDown(data) {
        console.log("data:",data);
        if ("txt" == data.fileType) {
          this.markdownText =data.fileContent;
          this.htmlContent = data.fileContent;
        } else if ("md" == data.fileType) {
          findMarkDownBypathV3(data).then(res => {
            if (res.data.code != 0) {
              this.$message(res.data.msg);
              return
            }
            console.log("markdown内容:",res);
            this.markdownText = res.data.data;
            this.htmlContent = this.markdownRenderer.render(this.markdownText);
            console.log(this.htmlContent);
            // document.getElementById('markdown-container').innerHTML = this.htmlContent;
          })
        }
      },
      // 解析markdown
      parseMarkdown() {
        console.log("解析开始",this.markdownText);
        this.htmlContent = this.markdownRenderer.render(this.markdownText);
      },
     // 处理字符串
     changePathName(str) {
        if (str) {
            var lastIndex = str.lastIndexOf('.');
            var result = str.substring(0, lastIndex);
            return result;
        }
        return str;
     },
      addKeyWord() {
        if (!this.keyWordInputValue) {
          this.$message('请输入关键字');
          return
        }
        if (this.keyWordInputValue.length > 50) {
          this.$message('一次关键字维护最多50字符');
          return
        }
        if (this.keyWordInputValue.includes(',')) {
          this.$message('关键字不能包含特殊字符,');
          return
        }
        let markDown = JSON.parse(JSON.stringify(this.chooseMarkDown))
        markDown.keyWord = this.keyWordInputValue
        addKeyWord(markDown).then(res => {
          this.openKeyWordDialog(markDown)
          if (res.data.code!= 0) {
            this.$message(res.data.msg);
            return
          }
          this.keyWordInputValue = ''
        })

      },
      deleteKeyWord(item) {
        let markDown = JSON.parse(JSON.stringify(this.chooseMarkDown))
        markDown.keyWord = item
        deleteKeyWord(markDown).then(res => {
          this.openKeyWordDialog(markDown)
          if (res.data.code!= 0) {
            this.$message(res.data.msg);
            return
          }
        })
      },
      openKeyWordDialog(data) {
        findMarkDownByKey(data.handle).then(o => {
          console.log(11)
          if (o.data.code == 0) {
            console.log(22,o.data.data)

            this.chooseMarkDown = o.data.data
            if (this.chooseMarkDown.keyWord) {
              this.keyWordList = this.chooseMarkDown.keyWord.split(',')
            } else {
              this.keyWordList = []
            }
          } else {
            this.chooseMarkDown = data
            if (data.keyWord) {
              this.keyWordList = data.keyWord.split(',')
            } else {
              this.keyWordList = []
            }
          }
          this.keyWordVisible = true
        }).catch(() => {
          this.keyWordVisible = true
        })
      }
    }
  }
  </script>

  <style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
  }

  th {
    background-color: #f2f2f2; /* 设置表头的背景颜色 */
  }

  tr:nth-child(even) {
    background-color: #dddddd; /* 设置偶数行的背景颜色 */
  }

  tr:hover {
    background-color: #f5f5f5; /* 设置鼠标悬停时的背景颜色 */
  }
  h1,h2,h3,h4,h5{
    border-bottom: 1px #d8d6d6 solid;
  }
  img{
    width: 80%;
  }
  .item-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
  }

  .item-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 80%; /* 调整文本最大宽度，根据实际需要调整 */
  }

  .item-tooltip {
    max-width: unset; /* 移除 Tooltip 的最大宽度限制 */
  }
  </style>
